<template>
  <div class="swiper-container">
    <div class="swipers-wraper">
      <div class="black-bg"></div>
      <div class="showlist">
        <div class="swiper-container flex-container" :style="swiperObj">
          <div class="img-wraper">
            <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/swiper.png" alt="" />
          </div>
          <div class="img-wraper" v-for="(item, index) in swpierLists" :key="index">
            <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/swiper.png" alt="" />
          </div>
          <div class="img-wraper">
            <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/swiper.png" alt="" />
          </div>
        </div>
        <div class="icon icon-left" @click="move(1200,-1)">
          <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon6.png" alt="" />
        </div>
        <div class="icon icon-right" @click="move(1200,1)">
          <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon5.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "swiper",
  data() {
    return {
      switchStatus:true,
      activeIndex: 1,
      distance:-1200,
      currentSwiperList:this.swpierLists,
      lists: [],
    };
  },
  computed: {
    swiperObj: function () {
        return {
            transform:`translate3d(${this.distance}px, 0, 0)`
         }
    },
  },
  methods: {
    move(offset, direction) {
        if(!this.switchStatus){
            return
        }
        this.switchStatus = false
        setTimeout(()=>{
            this.switchStatus = true
        },1500)
      direction === -1 ? this.activeIndex++ : this.activeIndex--;
      if (this.activeIndex > this.swpierLists.length) this.activeIndex = 1;
      if (this.activeIndex < 1) this.activeIndex = this.swpierLists.length;

      const destination = this.distance + offset * direction;
      this.animate(destination, direction);
    },
    animate(des, direc) {
      if (
        (direc === -1 && des < this.distance) ||
        (direc === 1 && des > this.distance)
      ) {
        this.distance += 30 * direc;
        window.setTimeout(() => {
          this.animate(des, direc);
        }, 20);
      } else {
        this.distance = des;
        if (des < ~this.swpierLists.length*1200) this.distance = -1200;
        if (des > -1200) this.distance = ~this.swpierLists.length*1200;
      }
    },
  },
  mounted(){
    // console.log(this.swpierLists,8989)
  },
  watch:{
    swpierLists:{
      handler:function(val){
        this.currentSwiperList = val
      },
      immediate:true,
      deep:true
    }
  },
  props: {
    swpierLists: {},
    duration: {},
    autoPlay: {},
  },
};
</script>

<style lang="less" scoped>
.extend {
  width: 100%;
  height: 100%;
  display: block;
}
.swipers-wraper {
  width: 100%;
  min-height: 575px;
  background: url("http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/banner-bg.png");
  box-sizing: border-box;
  position: relative;
  .black-bg {
    background: #242424;
    width: 1576px;
    height: 474px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }
  .showlist {
    width: 1200px;
    height: 504px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    .img-wraper {
      flex-shrink: 0;
      width: 1200px;
      height: 504px;
      overflow: hidden;
    }
  }
  .icon {
    cursor: pointer;
    position: absolute;
    width: 72px;
    height: 68px;
    top: 50%;
    transform: translateY(-50%);
  }
  .icon-left {
    left: 26px;
  }
  .icon-right {
    right: 26px;
  }
}
.flex-container {
  display: flex;
  align-items: center;
}
</style>